<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单与广告栏</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        h2 {
            margin: 10px;
            font-size: 18px;
            border-left: 5px solid green;
            padding-left: 10px;
        }

        /* 二级菜单样式 */
        .submenu {
            display: flex;
            justify-content: center;
            padding: 10px 0;
            border-top: 1px solid lightgray;
            border-bottom: 1px solid lightgray;
        }

        .submenu-item {
            margin: 0 20px;
            font-size: 16px;
            font-weight: bold;
            position: relative; /* 必须设置相对定位以显示绝对定位的子菜单 */
        }

        .submenu-item a {
            text-decoration: none;
            color: black;
        }

        .submenu-item a:hover {
            color: green;
        }

        /* 子菜单内容样式 - 默认隐藏 */
        .submenu-content {
            display: none;
            text-align: left;
            padding-left: 20px;
            font-size: 14px;
            color: #333;
            position: absolute;
            top: 100%; /* 让子菜单显示在菜单项下方 */
            left: 0;
            width: 200px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }

        /* 当鼠标悬浮在菜单项上时显示子菜单 */
        .submenu-item:hover .submenu-content {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 二级菜单标题 -->
    <h2>二级菜单</h2>
    <!-- 二级菜单 -->
    <div class="submenu">
        <div class="submenu-item">
            <a href="#">奶茶</a>
            <!-- 子菜单内容 -->
            <div class="submenu-content">
                <p>珍珠奶茶</p>
                <p>抹茶奶茶</p>
                <p>红豆奶茶</p>
            </div>
        </div>
        <div class="submenu-item">
            <a href="#">果茶</a>
            <!-- 子菜单内容 -->
            <div class="submenu-content">
                <p>柠檬果茶</p>
                <p>芒果果茶</p>
                <p>草莓果茶</p>
            </div>
        </div>
        <div class="submenu-item">
            <a href="#">咖啡</a>
            <!-- 子菜单内容 -->
            <div class="submenu-content">
                <p>美式咖啡</p>
                <p>拿铁咖啡</p>
                <p>摩卡咖啡</p>
            </div>
        </div>
    </div>
</body>
</html>
